<template>
  <div class="FinManage">
    <h2>财务管理</h2>
    <div class="operatingBox">
      <div class="operating">
        <el-button type="success" icon="el-icon-plus" size="small" @click="addNotice">新增</el-button>
      </div>
      <div class="operating">
        <el-input placeholder="请输入标题查询" v-model="searchContent" class="input-with-select">
          <el-button @click="mySearch" slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>
    <div class="tab-content">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
        <el-table-column prop="id" label="ID" width="55">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="100">
          <template slot-scope="scope">
            <el-tag disable-transitions v-if="scope.row.type == 0">
              收入
            </el-tag>
            <el-tag disable-transitions v-if="scope.row.type == 1">
              支出
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="head" label="标题" width="200">
        </el-table-column>
        <el-table-column prop="handleTime" label="经手时间" width="240">
          <template slot-scope="scope">
            {{
              dayjs(scope.row.handleTime)
                .format('YYYY-MM-DD HH: mm: ss') }}
          </template>
        </el-table-column>
        <el-table-column prop="handler" label="经手人" width="120">
        </el-table-column>
        <el-table-column prop="depName" label="部门" width="120">
        </el-table-column>
        <el-table-column prop="account" label="账户" width="180">
          <template slot-scope="scope">
            <el-tag disable-transitions v-if="scope.row.account == 0">
              财务支付宝账号
            </el-tag>
            <el-tag disable-transitions v-if="scope.row.account == 1">
              财务微信账号
            </el-tag>
            <el-tag disable-transitions v-if="scope.row.account == 2">
              建行对公账号
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="金额" width="180">
        </el-table-column>
        <el-table-column prop="status" label="状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag disable-transitions type="valid" v-if="scope.row.status == 0">
              有效
            </el-tag>
            <el-tag disable-transitions type="info" v-if="scope.row.status == 1">
              无效
            </el-tag>
            <el-tag disable-transitions type="warning" v-if="scope.row.status == 2">
              待定
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column fixed="right" prop="operation" label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit-outline" size="mini" @click="change(scope.row)">修改</el-button>
            <el-button @click="handleDelete(scope.$index, scope.row)" type="danger" icon="el-icon-close" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination @getPagination="getPagination" :total="total" :pageSize="pageSize"></Pagination>

    </div>

  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import dayjs from 'dayjs'
export default {
  name: '',
  components: {
    Pagination,

  },
  mixins: [],
  props: {

  },
  data() {
    return {
      pageSize: 5,
      total: 0,
      searchContent: '',
      //表格数据
      tableData: [
        {
          "id": "1",
          "type": "支出",//类型 0收入 1支出
          "head": "购买公务车",//标题
          "handleTime": "2011/2/1 11:56:00",//经手时间
          "handler": "李四",//经手人
          "depName": "泌尿科",//部门
          "account": "建行账号",//账户 0支付宝 1微信 2建行
          "amount": '-200,000.00',//金额
          "status": '有效'//0有效 1无效 2待定

        },
        {
          "id": 2,
          "type": 1,
          "status": 0,
          "head": "买车",
          "amount": -100000,
          "deptId": null,
          "account": 1,
          "handleTime": 1676563200000,
          "handler": "李四",
          "description": null,
          "remark": null,
          "annex": null,
          "createTime": null,
          "updateTime": null,
          "isDeleted": null,
          "depName": "总部门"

        }
      ],
    }
  },
  created() {
    this.$axios({//财务管理
      method: 'get',
      url: '/FinancialManagement/Financial/findFinancialList',
      params: {
        currentPage: 1,
        pageSize: 5
      }
    })
      .then(resp => {
        // console.log(resp.data);
        this.total = parseInt(resp.data.data.total);
        this.tableData = resp.data.data.list
      })
  },
  methods: {
    dayjs,
    //新增
    addNotice() {
      this.$router.push('/financial/addFin')
    },
    mySearch() {//条件查询
      if (this.searchContent == '') {
        this.$axios({//财务管理
          method: 'get',
          url: '/FinancialManagement/Financial/findFinancialList',
          params: {
            currentPage: 1,
            pageSize: 5
          }
        })
          .then(resp => {
            // console.log(resp.data);
            this.total = parseInt(resp.data.data.total);
            this.tableData = resp.data.data.list
          })
      } else {
        this.$axios({//根据head查询
          method: 'get',
          url: '/FinancialManagement/Financial/findFinancialByHead',
          params: {
            head: this.searchContent,
            currentPage: 1,
            pageSize: 5,
          }
        })
          .then(resp => {
            // console.log(resp.data);
            this.total = parseInt(resp.data.data.total);
            this.tableData = resp.data.data.list;
          })
      }

    },
    handleDelete(index, row) {//删除
      console.log(index, row);
      this.$confirm('此操作将删除该财务管理信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 执行删除
        if (row.status == 1) {
          this.$axios.post(`/FinancialManagement/Financial/deleteFinancial?id=${row.id}`)
            .then(resp => {
              this.$axios({//删除成功后重新渲染页面
                method: 'get',
                url: '/FinancialManagement/Financial/findFinancialList',
                params: {
                  "currentPage": 1,//当前页数默认第一页
                  "pageSize": 5,//每页显示记录数
                }
              })
                .then(resp => {
                  this.total = parseInt(resp.data.data.total);
                  this.tableData = resp.data.data.list;
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                })
            })
        } else {
          this.$message({
            message: '根据状态显示，该信息暂时无法删除',
            type: 'warning'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //获取点击的页码-------------------------------
    getPagination(page) {
      this.$axios({
        method: 'get',
        url: '/FinancialManagement/Financial/findFinancialList',
        params: {
          "currentPage": page,//当前页数默认第一页
          "pageSize": 5,//每页显示记录数
        }
      })
      .then(resp => {
        // console.log(resp.data);
        this.total = parseInt(resp.data.data.total);
        this.tableData = resp.data.data.list
      })
    },
    change(row){
      this.$router.push({
        path:'/financial/editFin',
        query:row
      })
    }
  },
  computed: {

  },
  watch: {

  },
  mounted() {

  },

};
</script>
<style lang='less' scoped>
h2 {
  margin: 15px;

}

.operatingBox {
  background-color: white;
  margin: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 3px solid #ccc;
  border-radius: 5px;
}

.operating {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
}

.el-input {
  width: 200px;
}

.select {
  display: flex;
  flex-direction: column;
}

.labelText {
  text-align: left;
  float: left;
  font-size: 14px;
  font-weight: 600;
  color: black;
}

.el-form-item {
  display: flex;

  flex-direction: column;
}

.el-input {
  width: 250px;
}

.tab-content {
  margin: 10px;
}

.block {
  display: flex;
  justify-content: space-between;
  margin: 5px;
  padding: 5px 0px;
}
</style>